<template>
  <div class="vc-search self">
    <div class="vc-search-left" id="self-search" v-bind:style="styleObj">
      <div
        :class="{display :display(idx,rowCount)}"
        :key="idx"
        :style="'width:'+box.width"
        class="search-input-box"
        v-for="(item,idx) in searchConfig.items"
      >
        <span :class="{firstBox : isFirstBox(idx,item)}" class="search-title">{{item.title}}</span>
        <el-input
          :placeholder="item.placeholder?item.placeholder:'请输入'"
          :style="'width:'+item.width"
          class="vc-search-input"
          clearable
          size="small"
          v-if="!item.type||item.type==='input'"
          v-model="searchConfig.params[item.key]"
        ></el-input>
        <el-select
          :placeholder="item.placeholder?item.placeholder:'请选择'"
          :style="'width:'+item.width"
          class="vc-search-input"
          clearable
          readonly
          size="small"
          suffix-icon="el-icon-arrow-down"
          v-else-if="item.type ==='select'"
          v-model="searchConfig.params[item.key]"
        >
          <el-option
            :key="group.code"
            :label="group.name"
            :value="group.code"
            v-for="group in item.groups"
          ></el-option>
        </el-select>
        <el-date-picker
          v-model="searchConfig.params[item.key]"
          :type="item.type"
          :format="item.format"
          :placeholder="item.placeholder"
          :start-placeholder="item.startPlaceholder"
          :end-placeholder="item.endPlaceholder"
          :editable="false"
          value-format="timestamp"
          class="vc-search-input"
          size="small"
          clearable
          v-else
        ></el-date-picker>
      </div>
      <div :style="'float:right;width:'+box.width" class="search-buton-box">
        <div class="button-box">
          <div class="expand-box" v-if="insideConfig.items.length>(rowCount?rowCount:2)">
            <el-button @click="isExpand = true" size="small" type="text" v-show="!isExpand">
              展开
              <i class="el-icon-arrow-down"></i>
            </el-button>
            <el-button @click="isExpand = false" size="small" type="text" v-show="isExpand">
              收起
              <i class="el-icon-arrow-up"></i>
            </el-button>
          </div>
          <el-button
            @click="searchConfig.search(searchConfig.params)"
            size="small"
            style="margin-right:6px"
            type="primary"
          >查询</el-button>
          <el-button @click="reset" size="small">重置</el-button>
        </div>
      </div>
    </div>
    <div class="vc-search-right"></div>
  </div>
</template>
<style lang="less">
.self.vc-search {
  padding: 14px 14px 2px 14px !important;
}
.vc-search-left,
.vc-search-right {
  float: left;
  min-width: 0 !important;
}
.vc-search-left {
  @media screen and (max-width: 1530px) {
    .search-buton-box {
      float: right;
      .button-box {
        float: right;
      }
    }
  }
  @media screen and (min-width: 1530px) {
    .search-buton-box {
      float: right;
      width: 23% !important;
      .button-box {
        float: right;
      }
    }
  }
  .search-input-box {
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 12px;
    float: left;
    .vc-search-input {
      width: calc(100% - 128px) !important;
      float: left;
    }
    .search-title {
      float: left;
    }
    .search-title,
    .el-input {
      display: inline-block;
      line-height: 30px;
      .el-input__inner {
        height: 30px !important;
        height: 30px !important;
      }
    }
    .search-title {
      margin-right: 10px;
      text-align: right;
    }
  }
}
.expand-box {
  display: inline-block;
}
.display {
  display: none !important;
}
.vc-search {
  overflow: hidden;
}
.search-buton-box {
  margin-bottom: 12px;
  float: right;
  .button-box {
    float: right;
    .el-button + .el-button {
      margin: 0px !important ;
    }
  }
}
</style>

<script>
export default {
  name: 'Tables',
  props: {
    searchConfig: {
      type: Object,
      default () {
        return {
          config: {
            rowCount: 2,
            col: '33%'
          },
          items: [
            {
              key: 'key',
              title: '标题',
              width: '140px',
              placeholder: '请输入'
            }
          ],
          reset: null,
          search: null,
          params: {}
        }
      }
    }
  },
  data () {
    return {
      box: {
        width: '34%'
      },
      insideConfig: {
        items: []
      },
      rowCount: 3,
      isExpand: false, // 默认不展开
      screenWidth: '',
      screenHeight: '',
      spanValue: 2,
      styleObj: {
        width: 'calc(100% + 73px)',
        marginLeft: '-73px'
      }
    }
  },
  methods: {
    /** 第一个boxClass */
    isFirstBox (idx, item) {
      if (idx % (this.rowCount + 1) === 0) {
        this.spanValue =
          this.spanValue >= item.title.length
            ? this.spanValue
            : item.title.length
        return true
      } else {
        return false
      }
    },
    /**
     * 获取styleobj
     */
    getStyleObj () {
      let width = 73 - (this.spanValue - 2) * 15
      let obj = {
        width: 'calc(100% + ' + width + 'px)',
        marginLeft: -width + 'px'
      }

      this.styleObj = obj
    },
    /**  */
    init () {
      this.insideConfig = JSON.parse(JSON.stringify(this.searchConfig))

      this.getStyleObj()
    },
    /*
      内置清空搜索条件
    */
    reset () {
      this.searchConfig.params = this.GLOBAL.object.clearValOfObj(
        this.searchConfig.params
      )
      this.searchConfig.reset()
    },
    /*
      判断display
    */
    display (idx, rowCount) {
      if (rowCount) {
        return idx >= rowCount && !this.isExpand
      } else {
        return idx >= 2 && !this.isExpand
      }
    }
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
    if (document.body.clientWidth >= 1530) {
      this.box.width = '25%'
      this.rowCount = 3
    } else {
      this.box.width = '33.3333%'
      this.rowCount = 2
    }
    this.init()
  },
  watch: {
    screenWidth (value) {
      if (value >= 1530) {
        this.box.width = '25%'
        this.rowCount = 3
      } else {
        this.box.width = '33.3333%'
        this.rowCount = 2
      }
    }
  }
}
</script>
